<template>
  <div class="container">
    <mt-header fixed :title="room.name">
      <router-link :to="{name:'room'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <a slot="right" class="btn" @click="openPop">
        <span>预定</span>
      </a>
    </mt-header>
    <div class="meeting-list">
      <div id="wrapper" ref="scrollWrap">
        <div class="scroller" ref="scroller">
          <ul ref="scrollList" v-if="meetings.length > 0">
            <li v-for="meeting in meetings">
              <meeting-item :meetingInfo="meeting"></meeting-item>
            </li>
          </ul>
          <empty-list v-else></empty-list>
        </div>
      </div>
    </div>
    <mt-datetime-picker
      ref="picker"
      type="datetime"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      hour-format="{value} 时"
      minuteFormat="{value} 分"
      @confirm="handleConfirm"
      :startDate="currentDate()">
    </mt-datetime-picker>
    <mt-popup
      v-model="popupVisible"
      :modal="true"
      :closeOnClickModal="false"
      popup-transition="popup-fade"
      class="mint-popup">
      <div class="container-box">
        <div class="box-header">
          <h1><i class="fa fa-server"></i>会议室预定</h1>
        </div>
        <div class="box-content">

          <mt-field label="主题" placeholder="请输入主题" v-model="mettingInfo.subject"></mt-field>
          <a class="mint-cell mint-field">
            <div class="mint-cell-left"></div>
            <div class="mint-cell-wrapper">
              <div class="mint-cell-title">
                <span class="mint-cell-text">开始时间</span>
              </div>
              <div class="mint-cell-value">
                <input placeholder="请选择开始时间" readonly  @focus="handleClick('start')" type="text" class="mint-field-core" v-model="mettingInfo.startDate">
              </div>
            </div><!---->
            <div class="mint-cell-right">

            </div>
          </a>
          <a class="mint-cell mint-field">
            <div class="mint-cell-left"></div>
            <div class="mint-cell-wrapper">
              <div class="mint-cell-title">
                <span class="mint-cell-text">结束时间</span>
              </div>
              <div class="mint-cell-value">
                <input placeholder="请选择结束时间" readonly  @focus="handleClick('end')" type="text" class="mint-field-core" v-model="mettingInfo.endDate">
              </div>
            </div><!---->
            <div class="mint-cell-right">

            </div>
          </a>
          <div class="btn-warp">
            <mt-button size="small" type="danger" plain @click="openPop">取消</mt-button>
            <mt-button size="small" type="primary" plain @click.native="handleCreateMeeting">预定</mt-button>
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
  import fetch from '../../utils/fetch'
  import moment from 'moment'
  import { Indicator } from 'mint-ui';
  import { Toast } from 'mint-ui';

  import BScroll from 'better-scroll'
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import MeetingItem from './MeeingItem'
  import EmptyList from '../Empty-List.vue'

  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop:20*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  const DEVICE_RATIO=getDeviceRatio();
  export default{
    data(){
      return{
        room:'',
        popupVisible:false,
        type:'',
        meetings:[],
        mettingInfo: {
          roomId: '',
          subject: '',
          startDate: '',
          endDate: '',
          content: ''
        },
      }
    },
    components:{
      MeetingItem,
      EmptyList
    },
    methods:{
      handleGetRoom(){
        fetch('/api/room/' + this.$route.params.roomId+'/detail').then(response =>{
          if(response.data.success) {
            this.room = response.data.obj
            this.meetings = this.room.meetingList
          }
        })
      },
      handleClick(type){
        this.type = type
        this.$refs.picker.open();
      },
      handleConfirm(data){
        let date = moment(data).format('YYYY-MM-DD HH:mm');
        if(this.type==='start'){
          this.mettingInfo.startDate = date;
        }
        if(this.type === 'end'){
          this.mettingInfo.endDate = date;
        }
      },
      handleCreateMeeting() {
        if(this.validateFeild()) {
          Indicator.open({
            text: '提交中...',
            spinnerType: 'fading-circle'
          });
          this.mettingInfo.roomId = this.$route.params.roomId
          this.mettingInfo.endDate = moment(this.mettingInfo.endDate).format('YYYY-MM-DD HH:mm:ss')
          this.mettingInfo.startDate = moment(this.mettingInfo.startDate).format('YYYY-MM-DD HH:mm:ss')
          let formData = JSON.stringify(this.mettingInfo)
          fetch.post('/api/room/meeting', formData).then(response =>{
            Indicator.close()
            if (response.data.success) {
              Toast({
                message: '操作成功',
                iconClass: 'icon icon-success'
              });
              this.popupVisible = !this.popupVisible;
              this.clear()
              this.handleGetRoom()
            }
          })
        }
      },
      validateFeild(){
        if (this.mettingInfo.subject.length === 0) {
          this.tips('主题不能为空')
          return false
        }
        if (this.mettingInfo.startDate.length === 0) {
          this.tips('开始时间不能为空')
          return false
        }
        if (this.mettingInfo.endDate.length === 0) {
          this.tips('结束时间不能为空')
          return false
        }

        return true
      },
      tips(message) {
        Toast({
          message: message,
          position: 'bottom',
          duration: 5000
        })
        Indicator.close()
      },
      currentDate(){
        return new Date()
      },
      openPop(){
        this.popupVisible = !this.popupVisible;

      },
      clear (){
        this.mettingInfo.startDate = ''
        this.mettingInfo.endDate = ''
        this.mettingInfo.subject = ''
      }
    },
    mounted(){
      const {scroller,scrollWrap,scrollList}=this.$refs;
      this.scroller = new BScroll(scrollWrap,{
        click:true,
        probeType:3,
        pullDownRefresh:DOWN_CONFIG,
        pullUpLoad:UP_CONFIG
      });
      this.handleGetRoom()
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    background: #fff;
    height: 100%;
  }
  .meeting-list{
    height: 100%;
    top: 40px;
    background: #fff;
    width: 100%;
    #wrapper{
      position: fixed;
      top: 40px;
      bottom: 3px;
      width: 100%;
      overflow: hidden;
      background:#F0EFF5;
      z-index: 1;
      .scroller{
        position: absolute;
        width: 100%;
        &.topPadding{
          top:1rem;
        }

      }
    }
  }


  .mint-cell-title{
    width: 105px;
  }
  .mint-cell-value{
    flex:1;
  }
  .mint-popup{
    width: 90%;
    top: 30%;
    border-radius: 10px;
    transition: .5s ease-out;
    shadow: 10px 10px 0 #000;

  }
  .btn{
    border: 1px solid #fff;
    padding: 5px;
    border-radius: 5px;
    @include fz(4px);
  }

  .container-box{
    position: relative;
    .box-header{
      padding: 10px;
      color: #fff;
      background: #26A2FF;
      border-radius: 8px 8px 0 0;
    }
    .box-content{
      padding: 20px 10px;
      .btn-warp{
        text-align: center;
      }
    }
  }
</style>
